<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" th:href="@{/layui/css/layui.css}">
<script type="text/javascript" th:src="@{/layui/layui.js}"></script>
<script  th:src="@{/js/jquery-3.6.0.min.js}"></script>
<body>
<style>
    #goodsItemDiv>div{
        padding :10px;
    }

    /*[type=checkbox]{*/
    /*    width:15px;*/
    /*    height: 15px;*/
    /*}*/
</style>
<div class="layui-fluid">
    <div class="layui-row" style="margin-top: 50px">
        <div class="layui-col-md8 layui-col-md-offset2" >
            <div style="display: flex;width: 100%;border-bottom: solid lightgray 1px;align-items: center; ">
                <i class="layui-icon layui-icon-left" style="margin-left: 10px;" onclick="window.location='/admin2'"></i>
                <h2 style="color: red;margin-left: 5px;margin-right: 5px ;line-height: 14px">我的地址</h2>
               <div><button class="layui-btn layui-btn-normal layui-btn-sm" id="insertButton"><i class="layui-icon layui-icon-add-1"></i></button></div>

            </div>

            <div style="display: flex;align-items: center;border-bottom: solid lightgray 1px; height: 40px">
                <!--                <div><input type="checkbox" th:id="'check-'+${c.cno}"></div>-->
                <!--                <div><img th:src="@{${c.goods.icon}}" style="width: 100px;height: 100px"></div>-->
                <div style="width: 65px;margin-left: 13px">省份</div>
                <div style="width: 65px">城市</div>
                <div style="width: 65px">县区</div>
                <div style="width: 205px">详细地址</div>
                <div style="width: 155px">备注</div>
                <div style="width: 100px">默认地址</div>

            </div>
            <div style="display: flex;align-items: center;border-bottom: solid lightgray 1px;"  id="goodsItemDiv" th:each="c:${addressList}">
<!--                <div><input type="checkbox" th:id="'check-'+${c.cno}"></div>-->
<!--                <div><img th:src="@{${c.goods.icon}}" style="width: 100px;height: 100px"></div>-->
                <div style="width: 50px" th:text="${c.province}" th:id="'province-'+${c.ano}">广东省</div>
                <div style="width: 50px" th:text="${c.city}" th:id="'city-'+${c.ano}">广东省</div>
                <div style="width: 50px" th:text="${c.county}" th:id="'county-'+${c.ano}">广东省</div>
                <div style="width: 200px" th:text="${c.detail}" th:id="'detail-'+${c.ano}">广东省</div>
                <div style="width: 150px" th:text="${c.comment}" th:id="'comment-'+${c.ano}">广东省</div>
                <div style="width: 50px" th:text="${c.moren}" th:id="'moren-'+${c.ano}">广东省</div>
                <div ><button class="layui-btn layui-btn-normal layui-btn-xs" th:id="'update-'+${c.ano}">修改</button></div>
                <div ><button class="layui-btn layui-btn-warm layui-btn-xs" th:id="'delete-'+${c.ano}">删除</button></div>

                <div>
                    <button class="layui-btn layui-btn-danger layui-btn-xs" th:id="'moren-'+${c.ano}" th:if="${c.moren}=='是'" >设置为默认</button>
                    <button class="layui-btn layui-btn-primary layui-btn-xs" th:id="'moren-'+${c.ano}" th:if="${c.moren}=='否'">设置为默认</button>
                </div>
                <div></div>

            </div>
    </div>
</div>
</div>


<!--<div>-->
<!--<form th:action="@{/buyer/order/insertPre}" method="post" id="carForm">-->
<!--    <input type="hidden" name="orderInfoStr" id="orderInfoStr"/>-->
<!--    <input type="hidden" name="allCost" id="allCostVal">-->
<!--</form>-->
<!--</div>-->
<div id="insertTable" style="display: none">
    <form class="layui-form" id="addressForm">
        <div style="padding: 50px">
            <div class="layui-form-item">
                <label class="layui-form-label">省份</label>
                <div class="layui-input-inline">
                    <input type="text" name="province"  id="province1" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">城市</label>
                <div class="layui-input-inline">
                    <input type="text" name="city" id="city1"  class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">县区</label>
                <div class="layui-input-inline">
                    <input type="text" name="county" id="county1"  class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">详细地址</label>
                <div class="layui-input-inline">
                    <input type="text" name="detail" id="detail1"  class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-inline">
                    <input type="text" name="comment"  id="comment1" class="layui-input">
                </div>
            </div>
                        <button type="button" style="display: none"  lay-submit lay-filter="addressForm" id="addressSubmit" >立即提交</button>
        </div>

    </form>
</div>

<div id="updateTable" style="display: none">
    <form class="layui-form" id="updateForm">
        <input type="hidden" name="ano" id="ano2">
        <div style="padding: 50px">
            <div class="layui-form-item">
                <label class="layui-form-label">省份</label>
                <div class="layui-input-inline">
                    <input type="text" name="province"  id="province2" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">城市</label>
                <div class="layui-input-inline">
                    <input type="text" name="city" id="city2"  class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">县区</label>
                <div class="layui-input-inline">
                    <input type="text" name="county" id="county2"  class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">详细地址</label>
                <div class="layui-input-inline">
                    <input type="text" name="detail" id="detail2"  class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-inline">
                    <input type="text" name="comment"  id="comment2" class="layui-input">
                </div>
            </div>
            <button type="button" style="display: none"  lay-submit lay-filter="updateForm" id="addressSubmit2" >立即提交</button>
        </div>

    </form>
</div>


<script th:inline="javascript" type="text/javascript">

    $(function (){

        layui.use(['table','form','layer'],function(){
            var table=layui.table;
            var layer=layui.layer;
            var form=layui.form;

            //增加地址 触发弹窗
            $("#insertButton").click(function (){
                layer.open({
                    type: 1,
                    btn: ['提交','取消'],
                    skin: 'layui-layer-lan',
                    area: '500px',
                    title: '新增地址',
                    content: $("#insertTable"),
                    yes: function (index, layero){
                        $("#addressSubmit").click();
                        layer.close(index);
                    },btn2: function (){
                        //取消按钮回调
                    },end: function (){
                     //窗口关闭回调
                    }
                });
            })


            //增加地址 表单提交
            form.on('submit(addressForm)',function(data){

                    console.log(data.elem);
                    console.log(data.form);
                    console.log(data.field);

                    let formData =new FormData(data.form);

                    $.ajax({
                        url: '/buyer/center/addressInsert',
                        contentType: false,
                        data: formData,
                        dataType: 'json',
                        processData: false,
                        type: 'post',
                        success: function(res){
                            if(res.res){
                                $("#province1").val("");
                                $("#city1").val("");
                                $("#county1").val("");
                                $("#detail1").val("");
                                $("#comment1").val("");
                                layer.msg(res.msg,{time:2000},function (){
                                    window.location='/buyer/center/addressList';
                                });
                            }
                        },
                    })
                })

            //删除按钮
            $("[id^=delete-]").click(function (){
                    let id=this.id.split('-')[1];
                    layer.confirm('确定要删除吗', {
                        btn: ['确定', '取消']},function (){
                        $.ajax({
                            url: '/buyer/center/addressDelete/'+id,
                            type: "post",
                            success: function(res){
                                if(res.res){
                                    layer.msg(res.msg,{time:2000},function (){
                                        location.href='/buyer/center/addressList'
                                    })
                                }
                            },
                        })//ajax
                    })//layer
            })//delete click

            //修改按钮 触发弹窗
            $("[id^=update-]").click(function (){
                let cid=this.id.split('-')[1];


                $("#province2").val($("#province-"+cid).text());
                $("#city2").val($("#city-"+cid).text());
                $("#county2").val($("#county-"+cid).text());
                $("#detail2").val($("#detail-"+cid).text());
                $("#comment2").val($("#comment-"+cid).text());
                $("#ano2").val(cid);

                layer.open({
                        type: 1,
                        btn: ['提交','取消'],
                        skin: 'layui-layer-lan',
                        area: '500px',
                        title: '修改地址',
                        content: $("#updateTable"),
                        yes: function (index, layero){
                            $("#addressSubmit2").click();
                            layer.close(index);
                        },btn2: function (){
                            //取消按钮回调
                        },end: function (){
                            //窗口关闭回调
                        }
                    });

            })//update click

            //默认按钮 触发事件
            $("[id^=moren-]").click(function (){
                let cid=this.id.split('-')[1];
                $.post('/buyer/center/morenAddressUpdate/' + cid, function (res) {
                    window.location='/buyer/center/addressList';
                })



            })//update click

            //修改地址 表单提交
            form.on('submit(updateForm)',function(data){

                console.log(data.elem);
                console.log(data.form);
                console.log(data.field);

                let formData =new FormData(data.form);

                $.ajax({
                    url: '/buyer/center/addressUpdate',
                    contentType: false,
                    data: formData,
                    dataType: 'json',
                    processData: false,
                    type: 'post',
                    success: function(res){
                        if(res.res){
                            $("#province").val("");
                            $("#city").val("");
                            $("#county").val("");
                            $("#detail").val("");
                            $("#comment").val("");
                            layer.msg(res.msg,{time:2000},function (){
                                window.location='/buyer/center/addressList';
                            });
                        }
                    },
                })
            })

        })//layui.use
    })//$function
</script>
</body>

</html>